<template>
  <div class="home">
       <header class="headerStyle">{{times}}</header>
       <div class="headerStyle">{{ages}}岁</div>
      <div class="headerStyle">跳动{{seconds}}秒</div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {

  },
  data(){
    return{
        times:0,
        ages:0,
        seconds:0,
        old:new Date("1993-07-19")
    }
  },

  created() {


      setInterval(()=>{
          this.calcuateTime();
          this.calcuateAge();
      },1000)




  },

  mounted(){
    //获取当前时间
  },
  methods: {
    calcuateTime() {
      let target = this.old
      let current = new Date();


        let day = Math.floor((current - target) / 1000 / 60 / 60 / 24);
				let hour = Math.floor((current - target) / 1000 / 60 / 60 % 24);
				let minute= Math.floor((current - target) / 1000 / 60 % 60);
				let second= Math.floor((current - target) / 1000 % 60);
				this.times = "已经走过了 : " + day + " 天 " + hour + " 小时 " +  minute + " 分 " + second + " 秒 ";
				this.seconds = Math.floor((current-target) /1000)




    },
    calcuateAge(){
      let date = new Date()
        // 今天日期，数组，同 birthday
        let birthdayDate = this.old
        let birthday = [birthdayDate.getFullYear(), birthdayDate.getMonth(), birthdayDate.getDate()]
        let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
        // 分别计算年月日差值
        let age = today.map((value, index) => {
          return value - birthday[index]
        })
      // 当天数为负数时，月减 1，天数加上月总天数
        if (age[2] < 0) {
          // 简单获取上个月总天数的方法，不会错
          let lastMonth = new Date(today[0], today[1], 0)
          age[1]--
          age[2] += lastMonth.getDate()
        }
        // 当月数为负数时，年减 1，月数加上 12
        if (age[1] < 0) {
          age[0]--
          age[1] += 12
        }
        this.ages = age[0]


    }
  }
}
</script>
<style lang="less">
 .home{
  padding:20px;
   .headerStyle{
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
   }
 }

</style>
